<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于展示头像的场景，如个人中心，或者评论列表页的用户头像展示等场所。
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<fu-avatar :src="src"></fu-avatar>
		</fu-section>
		
		<fu-section title="大小" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-avatar size="30" :src="src"></fu-avatar>
				<fu-avatar size="40" :src="src"></fu-avatar>
				<fu-avatar size="50" :src="src"></fu-avatar>
			</view>
		</fu-section>
		
		<fu-section title="形状" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-avatar shape="circle" :src="src"></fu-avatar>
				<fu-avatar shape="square" :src="src"></fu-avatar>
			</view>
		</fu-section>
		
		<fu-section title="边框" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-avatar :src="src" border></fu-avatar>
				<fu-avatar borderColor="#2979ff" :src="src" border></fu-avatar>
				<fu-avatar borderColor="#2979ff" :borderSize="2" :src="src" border></fu-avatar>
			</view>
		</fu-section>
		
		<fu-section title="文字头像（自动背景色）" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-avatar text="F" fontSize="20" randomBgColor :colorIndex="0"></fu-avatar>
				<fu-avatar text="王" fontSize="20" randomBgColor></fu-avatar>
				<fu-avatar text="心" fontSize="20" randomBgColor></fu-avatar>
				<fu-avatar text="如" fontSize="20" randomBgColor></fu-avatar>
				<fu-avatar text="水" fontSize="20" randomBgColor></fu-avatar>
			</view>
		</fu-section>
		
		<fu-section title="角标" customClass="fu-m-t-20" type="line">
			<view class="fu-relative" style="width: fit-content;">
				<fu-avatar :src="src"></fu-avatar>
				<fu-badge value="100" absolute :offset="[-5, -10]"></fu-badge>
			</view>
		</fu-section>
		
		<fu-section title="头像组" customClass="fu-m-t-20" type="line">
			<fu-avatar-group :urls="groupList" size="35" gap="0.4"></fu-avatar-group>
			<view class="fu-m-t-20">
				<fu-avatar-group :urls="groupList" size="35" gap="0.6"></fu-avatar-group>
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';

	// data数据
	const src = ref('https://mp-537f4c84-f806-461e-b77b-937c4698216a.cdn.bspapp.com/素材/头像/打工人.webp');
	const groupList = reactive([
		{src: 'https://mp-537f4c84-f806-461e-b77b-937c4698216a.cdn.bspapp.com/素材/头像/打工人.webp'},
		{src: 'https://mp-537f4c84-f806-461e-b77b-937c4698216a.cdn.bspapp.com/素材/头像/打工人.webp'},
		{text: 'FU'},
		{icon: 'vip'},
		{src: 'https://mp-537f4c84-f806-461e-b77b-937c4698216a.cdn.bspapp.com/素材/头像/打工人.webp'},
		{src: 'https://mp-537f4c84-f806-461e-b77b-937c4698216a.cdn.bspapp.com/素材/头像/打工人.webp'},
	]);
</script>

<style lang="scss">

</style>